<template>
  <!-- 
  组件名称: TopHeader
  功能描述: 头部组件,包含消息通知和用户信息,个人中心,退出登录
  业务归属: layout-default 默认布局
   -->
  <div class="header">
    <div class="personal">
      <!-- 消息 -->
      <el-badge :is-dot="info > 0" class="item">
        <el-icon>
          <Bell />
        </el-icon>
      </el-badge>

      <!-- 头像 -->
      <el-avatar
        class="ml mr"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />

      <!-- 下拉菜单 -->
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          欢迎你, {{ username }}
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="User" command="user">个人中心</el-dropdown-item>
            <el-dropdown-item icon="SwitchButton" command="logout"
              >退出登录</el-dropdown-item
            >
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入 ref 函数, 用于创建响应式引用
import { ref } from "vue";
// 引入 pinia 文件里的 store, 里面存有用户信息
import { useUserStore } from "@/store/auth";
// storeToRefs 是一个 用于保持响应式解构的工具函数，它的核心作用是：将 Pinia Store 中的状态（state）和计算属性（getters）转换为响应式引用（refs），使你在解构时不会丢失响应性。
import { storeToRefs } from "pinia";
// 声明 userStore 实例 通过 useUserStore 获取用户信息
const userStore = useUserStore();
// 通过 storeToRefs 解构出 username, 这样在模板中使用时就可以直接使用 username 了
const { username } = storeToRefs(userStore);

// useRouter 是一个 组合式 API,它的核心作用是：在组件中访问全局路由实例，用于执行编程式导航（如跳转页面、前进/后退）和访问路由配置。
import { useRouter } from "vue-router";
// 声明一个 router 实例, 用于路由跳转
const router = useRouter();
// 声明一个 info 变量, 用于消息通知的数量
const info = ref(5);

// handleCommand 函数, 用于处理下拉菜单的命令,由于 @command 事件触发
// 传入的参数是 command, 所以这里的参数也是 command
// 这个函数的作用是根据传入的 command 执行不同的操作
// 这里的 command 是下拉菜单中每个选项的 command 属性
// 例如: command="user" 就会执行跳转到个人中心的操作
// command="logout" 就会执行退出登录的操作
const handleCommand = (command: string) => {
  switch (command) {
    case "user":
      // 跳转到个人中心
      router.push("/personal");
      break;
    case "logout":
      // 退出登录,但逻辑应该在 pinia 中写,这里只调用方法
      userStore.logout();
      router.push("/login");
      break;
    default:
      break;
  }
};
</script>

<style scoped lang="less">
.header {
  background-color: #fff;
  height: 60px;
  padding: 0 20px;
  .personal {
    height: 100%;
    float: right;
    display: flex;
    align-items: center;
  }
  /* 移除当前组件的下拉菜单焦点轮廓 */
  :deep(.el-dropdown-link:focus) {
    outline: none;
  }
}
</style>
